import React from 'react';
import  TplList from '../../component/tplList_cll1/tplList_cll1'//list
import Tabs from '../../component/Tabs/Tabs'
import './css/Emergency_support.css'

class Emergency_support extends React.Component {
    
    componentWillMount = () => {
 
    } 
    componentDidMount = () => {
    }
    resume = () => {
        location.reload();
        this.setState();
      }
    constructor(props) {
        super(props);
        this.state = { 
            legend : false , 
            clickProps:{
                display: 'none'
            },
            clickProps2:{
                display: 'block'
            }
        };
    }
    datas = [
        {
            text: '应急保障',
            value: 0
        },{
            text: '应急响应查询',
            value: 1
        },
    ];
    listData=[
        {
            title:"防汛物资",
            time:"",
            pagetype:'point_list',
            img:'./assets/Emergency_support/应急响应_03.png',
            rightImg:"./assets/List/left.png",
        },
        {
            title:"抢险队伍",
            time:"",
            pagetype:'force_list',
            img:'./assets/Emergency_support/应急响应_06.png',
            rightImg:"./assets/List/left.png",
        },
        {
            title:"避灾场所",
            time:"",
            pagetype:'shelter_list',
            img:'./assets/Emergency_support/应急响应_09.png',
            rightImg:"./assets/List/left.png",
        },
        {
            title:"地质灾害点",
            time:"",
            pagetype:'disaster_list',
            img:'./assets/Emergency_support/应急响应_13.png',
            rightImg:"./assets/List/left.png",
        }
    ]
    listData2=[
        {
            title:"关于我县",
            time:"响应时间：",
        },
        {
            title:"关于我县",
            time:"响应时间：",
        },
        {
            title:"关于我县",
            time:"响应时间：",
        },
        {
            title:"关于我县",
            time:"响应时间：",
        }
    ]
    // click = (item, index) => {
    //     console.log(item, index);

    //     if(item.value){
    //         this.setState({clickProps:{display: 'block'}}); 
    //         this.setState({clickProps2:{display: 'none'}});           
    //     }else{            
    //         this.setState({clickProps2:{display: 'block'}});
    //         this.setState({clickProps:{display: 'none'}}); 
    //     }

    //     // T.data('Emergency_support_test', {param: '0'})
    // }
    listClick = (item) => {
        console.log(item);
        T.data('support_key',item);
        T.router.go('/Emergency_support_2');
        // console.log(T.data('key'))
        // this.pageType = .name
    }
    config = {
        color: '#fff'
    }
    listConfig = {
        tplType : 'file',
        rightImg : true,
        
        title : {
            key:"title", 
            style:{color:"#444"}
        },
        time : {
            key:"time",
            style:{color:"#f00"}
        },
        img : {//左边图标
            key:"img",
            style:{"width": '40px'} 
        }, 
        rightImg : {//右边图标
            key:"rightImg",
            style:{"width": '40px','display': 'inline-block'} 
        },
    }
    listConfig2 = {
        tplType : 'file',
        title : {
            key:"title", 
            style:{color:"#444"}
        },
        time : {
            key:"time",
            style:{color:"#f00"}
        },
        // img : './assets/List/left.png'
        img:null,
        rightCon:{ 
            style : { fontSize: '15px',backgroundColor:' #A9A9A9', width:'61px',   height: '40px',   lineHeight:' 40px', color: '#fff',    borderRadius: '5px',  textAlign: 'center', display: 'inline-block',    position: 'relative',   top:' 50%',  marginTop:' -20px',  float: 'right',},
             rightTxt:'结束'
            },  //右边内容
        // img : {//左边图标
        //     key:"img",
        //     style:{"width": '40px'} 
        // }, 
        rightImg : {//右边图标
            key:"rightImg",
            style:{"width": '40px','display': 'inline-block'} 
        },
    }
    render() {
        
        return (
            <div  className="list" >
                <Tabs dataSource={this.datas} onClick={this.click} config={this.config} />
                {/* //应急保障 */}
                <div className='first' style={{'display':this.state.clickProps2.display}}> 
                    <TplList  listClick = {(data) => this.listClick(data)} config = {this.listConfig} data={this.listData}  ></TplList>
                </div>
                {/* 应急响应查询 */}
                <div className='second' style={{'display':this.state.clickProps.display}}>
                    <TplList  listClick = {(data) => this.listClick(data)} config = {this.listConfig2} data={this.listData2}  ></TplList>   
                </div>         
            </div> 
        )
    }
}

export default Emergency_support
